<template>

    <ul id="type-shop">
        <li v-for="shop in data">
        <router-link to>
            <div>
                <img :src="shop.img" alt="">
            </div>
            <p>{{shop.name}}</p>
          </router-link>  
        </li>
    </ul>


</template>

<script>

export default {
    props:['data']
}
</script>

<style scoped lang="scss">


    #type-shop{
        
        display: flex;
        align-content: center;
        padding: 50px 0px 30px;
        flex-wrap: wrap;
        width: 95%;
        margin:0 auto;
        // justify-content: space-around;
        li{
            width: 33.3%;
            div{
                width: 80%;
                margin: 10px auto;
                img{
                    width:100%
                }
            }
            a{
                text-decoration: none;
            }
            p{
                text-align: center;
                font-size: 12px;
                color:rgb(99, 99, 99);
            }
        }
    }

</style>